<!--
*  功能描述：合同反填页面
 -->
<template>
  <div>
    <!-- 查询客户并回填到文本框 -->
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
        <div>
          <!-- 条件查询 -->
          <div>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content bg-purple">
                  <span>客户姓名:</span
                  ><el-input
                    v-model="countryName"
                    style="width: 120px"
                  ></el-input></div
              ></el-col>
              <el-col :span="12"
                ><div class="grid-content bg-purple-light">
                  <span>客户类型:</span>
                  <el-select
                    v-model="edTypeName"
                    placeholder="请选择客户类型"
                    style="width: 120px"
                  >
                    <el-option label="普通客户" value="普通客户"></el-option>
                    <el-option label="VIP客户" value="VIP客户"></el-option>
                  </el-select></div
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content bg-purple">
                  <span>所在省份:</span
                  ><el-input
                    v-model="edCountry2Nmae"
                    style="width: 120px"
                  ></el-input></div
              ></el-col>
              <el-col :span="12"
                ><div class="grid-content bg-purple-light">
                  <span>所在城市:</span
                  ><el-input
                    v-model="edCountry3Nmae"
                    style="width: 120px"
                  ></el-input></div
              ></el-col>
            </el-row>
            <el-button
              icon="el-icon-search"
              circle
              @click="GetCustomer()"
            ></el-button>
          </div>
          <!-- 显示 -->
          <div>
            <el-table :data="tableData" height="250" border style="width: 100%">
              <el-table-column prop="CustId" label="编号" width="180">
              </el-table-column>
              <el-table-column prop="CustName" label="客户名">
              </el-table-column>
              <el-table-column prop="CustPhones" label="联系人">
              </el-table-column>
              <el-table-column prop="CustAddress" label="公司地址">
              </el-table-column>
              <el-table-column prop="CustPhone" label="电话"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row)"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 合同录入表单 -->
    <div>
      <!-- 客户文本框 -->
      <h2>客户信息</h2>
      <el-button
        icon="el-icon-search"
        circle
        @click="OpenGetCustomer()"
      ></el-button>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="客户编号:" prop="ClientId">
                <el-input v-model="ruleForm.ClientId" disabled></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="客户简称:">
                <el-input
                  v-model="customer.custAbbreviation"
                  disabled
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="客户名称:">
                <el-input v-model="customer.custName" disabled></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="公司地址:">
                <el-input v-model="customer.custAddress" disabled></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="邮政编码:">
                <el-input v-model="customer.custEmail" disabled></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="联系人:">
                <el-input v-model="customer.custPhones" disabled></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="公司电话:">
                <el-input v-model="customer.custPhone" disabled></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="传真号:">
                <el-input v-model="customer.custFaxNumber" disabled></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <h2>合同信息</h2>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="合同编号:" prop="ContractNumber">
                <el-input v-model="ruleForm.ContractNumber"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="合同文本编号:" prop="ContractextText">
                <el-input v-model="ruleForm.ContractextText"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="合同分类:">
                <el-select
                  v-model="ruleForm.ContractType"
                  placeholder="请选择合同分类"
                >
                  <el-option
                    label="工程咨询合同"
                    value="工程咨询合同"
                  ></el-option>
                  <el-option
                    label="工程总承包合同"
                    value="工程总承包合同"
                  ></el-option>
                  <el-option
                    label="工程代建合同"
                    value="工程代建合同"
                  ></el-option>
                  <el-option label="项目协议" value="项目协议"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-form-item label="合同名称:" prop="ContractName">
                <el-input v-model="ruleForm.ContractName"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-form-item label="建设单位:" prop="Development">
                <el-input v-model="ruleForm.Development"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <el-form-item label="甲方类型:" prop="OwnerType">
                <el-select
                  v-model="ruleForm.OwnerType"
                  placeholder="请选择甲方类型"
                >
                  <el-option label="北京政府" value="北京政府"></el-option>
                  <el-option label="宁夏政府" value="宁夏政府"></el-option>
                  <el-option label="华润置地" value="华润置地"></el-option>
                  <el-option label="海亮地产" value="海亮地产"></el-option>
                  <el-option label="华夏地产" value="华夏地产"></el-option>
                  <el-option label="北京城建" value="北京城建"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="结构形式:" prop="structuralstyleIds">
                <el-cascader
                  v-model="structuralstyleIds"
                  :options="structuralstyleData"
                  :props="structuralstyleoptions"
                  clearable
                ></el-cascader>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="建筑分类:" prop="buildingType">
                <el-cascader
                  v-model="buildingTypeIds"
                  :options="buildingTypeData"
                  :props="buildingTypeoptions"
                  clearable
                ></el-cascader>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="建筑面积:" prop="BuildingArea">
                <el-input
                  v-model="ruleForm.BuildingArea"
                  style="width: 200px"
                ></el-input
                ><span>平方米</span>
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="工程负责人:" prop="ProjectDirector">
                <el-input v-model="ruleForm.ProjectDirector"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="电话:" prop="TelePhone1">
                <el-input v-model="ruleForm.TelePhone1"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="子公司:" prop="Subsidiary">
                <el-select
                  v-model="ruleForm.Subsidiary"
                  placeholder="请选择子公司"
                >
                  <el-option label="子公司1" value="子公司1"></el-option>
                  <el-option label="子公司2" value="子公司2"></el-option>
                  <el-option label="子公司3" value="子公司3"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="甲方负责人:" prop="OwnerDirector">
                <el-input v-model="ruleForm.OwnerDirector"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="电话:" prop="TelePhone2">
                <el-input v-model="ruleForm.TelePhone2"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="工程地点:" prop="ProjectPlace">
                <el-input v-model="ruleForm.ProjectPlace"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="原始合同额:" prop="OriginalContractPrice">
                <el-input v-model="ruleForm.OriginalContractPrice"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="实际合同额:" prop="RealyContractPrice">
                <el-input v-model="ruleForm.RealyContractPrice"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="签约日期:" prop="CreateTime">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.CreateTime"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="图纸套数:">
                <span>总数:</span
                ><el-input
                  v-model="ruleForm.DrawingNum"
                  style="width: 80px"
                ></el-input>
                <span>已出:</span
                ><el-input
                  v-model="ruleForm.GetDrawingNum"
                  style="width: 80px"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="差旅次数:">
                <span>总数:</span
                ><el-input
                  v-model="ruleForm.FloorNum"
                  style="width: 80px"
                ></el-input>
                <span>已出:</span
                ><el-input
                  v-model="ruleForm.GetFloorNum"
                  style="width: 80px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="合同允许状态:">
                <el-select
                  v-model="ruleForm.ContractState"
                  placeholder="请选择合同允许状态"
                >
                  <el-option label="运行" value="运行"></el-option>
                  <el-option label="暂停" value="暂停"></el-option>
                  <el-option label="完成" value="完成"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="备注" >
                <el-input
                  type="textarea"
                  v-model="ruleForm.ContractRemarks"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // var styleIds = (rule, value, callback) => {
    //     if (value) {
    //       return callback(new Error('请至少选择一个结构形式'))
    //     }
    // }

    return {
      ruleForm: {
        ContractId: "",
        ContractNumber: "",
        ContractName: "",
        Bevelopment: "",
        StructuralstyleId: "",
        ProjectDirector: "",
        OwnerDirector: "",
        OriginalContractPrice: "",
        DrawingNum: "",
        GetDrawingNum: "",
        BuildingType: "",
        TelePhone1: "",
        TelePhone2: "",
        RealyContractPrice: "",
        FloorNum: "",
        GetFloorNum: "",
        ContractType: "",
        OwnerType: "",
        BuildingArea: "",
        Subsidiary: "",
        ProjectPlace: "",
        CreateTime: "",
        ContractState: "",
        ContractRemarks: "",
        ClientId: "",
        ContractextText: "",
        ContractRateState: "",
      },

      rules: {
        ContractNumber: [
          { required: true, message: "请输入合同编号", trigger: "blur" },
        ],
        ContractName: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
        ],
        Development: [
          { required: true, message: "请输入建设单位", trigger: "blur" },
        ],

        OwnerType: [
          { required: true, message: "请选择甲方类型", trigger: "change" },
        ],
        ClientId: [
          { required: true, message: "请输入用户编号", trigger: "blur" },
        ],
        CreateTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      //结构形式所需
      structuralstyleData: [],
      structuralstyleoptions: {
        value: "StructuralstyleId",
        label: "Structuralstyle",
        children: "children",
        multiple: true,
      },
      structuralstyleIds: [],
      //建筑类型所需
      buildingTypeData: [],
      buildingTypeoptions: {
        value: "BuildingType",
        label: "BuildingTypeName",
        children: "children",
        multiple: true,
      },
      buildingTypeIds: [],
      //客户反填
      dialogVisible: false,
      tableData: [],
      countryName: "",
      edCountry2Nmae: "",
      edCountry3Nmae: "",
      edTypeName: "",
      customer: {
        custName: "",
        custPhone: "",
        custAbbreviation: "",
        custAddress: "",
        custPhones: "",
        custFaxNumber: "",
        custEmail: "",
      },
      //合同反填
    };
  },
  methods: {
    //修改方法
    submitForm(formName) {
      console.log(this.structuralstyleIds);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.$http
            .post(
              `Contrac/UpContractInfos`,
              this.ruleForm
            )
            .then((res) => {
              if (res.data > 0) {
                alert("修改成功");
                this.$router.push('/contractShow')
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取结构形式
    GetstructuralstyleInfo() {
      this.$http
        .get(`Contrac/GetStaStru`)
        .then((res) => {
          this.structuralstyleData = res.data;
          console.log(this.structuralstyleData);
        });
    },
    //获取建筑类型
    GetBuildingType() {
      this.$http
        .get(`Contrac/GetBuild`)
        .then((res) => {
          this.buildingTypeData = res.data;
          console.log(this.buildingTypeData);
        });
    },
    //获取客户信息
    GetCustomer() {
      this.$http
        .get(`Contrac/GetCustomers`, {
          params: {
            name: this.countryName,
            edCountry2Nmae: this.edCountry2Nmae,
            edCountry3Nmae: this.edCountry3Nmae,
            edTypeName: this.edTypeName,
          },
        })
        .then((res) => {
          this.tableData = res.data;
          console.log(this.tableData);
        });
    },
    //打开客户信息模态框
    OpenGetCustomer() {
      this.dialogVisible = true;
    },
    //选择客户反填
    handleEdit(row) {
      this.ruleForm.ClientId = row.CustId;
      this.customer.custName = row.CustName;
      this.customer.custPhone = row.CustPhone;
      this.customer.custAbbreviation = row.CustAbbreviation;
      this.customer.custAddress = row.CustAddress;
      this.customer.custPhones = row.CustPhones;
      this.customer.custFaxNumber = row.CustFaxNumber;
      this.customer.custEmail = row.CustEmail;
      this.dialogVisible = false;
    },
    //获取反填数据
    GetShowData() {
      this.$http
        .get(
          `Contrac/GetContractInfosById?id=${this.$route.params.id}`
        )
        .then((res) => {
          console.log(res.data.PageData);
          this.ruleForm = res.data;
          this.$nextTick(()=>{
            var arr = res.data.StructuralstyleId.split(',')
            console.log(arr)
            for (let index = 0; index < arr.length; index++) {
                this.structuralstyleIds.push(arr[index])
                
            }
            console.log(this.structuralstyleIds)
            var err = res.data.BuildingType.split(',')
            
            for (let index = 0; index < err.length; index++) {
              this.buildingTypeIds.push(err[index])
            }
          })
          console.log(this.ruleForm);
        });
    },
  },
  created() {
    
  },
  mounted() {
    this.GetstructuralstyleInfo();
    this.GetBuildingType();
    this.GetCustomer();
    this.GetShowData();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
